<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common.inc" %>    
<!-- 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/form.js"></script>
<script type="text/javascript" language="javascript">
<!--
	function getTote(name,sId){
		var objs = document.getElementsByName(name);
		var tote = 0;
		for(var i = 0; i < objs.length; i++){
			tote = tote + Number(objs[i].value);
		}
		return Math.round(tote * 100) / 100;
	}

	function getToteTarget(name,sId){
		if(sId != ""){
			document.getElementById(sId).innerText = getTote(name,sId);
		}
		getTotalTarget();
	}
	
	function getTotalTarget(){
		var total = getTote('januaryTarget','') + getTote('februaryTarget','') + getTote('marchTarget','') 
					+ getTote('aprilTarget','') + getTote('mayTarget','') + getTote('juneTarget','') 
					+ getTote('julyTarget','') + getTote('augustTarget','') + getTote('septemberTarget','') 
					+ getTote('octoberTarget','') + getTote('novemberTarget','') + getTote('decemberTarget','');
		document.getElementById("totalTargets").innerText = Math.round(total * 100) / 100;
		document.getElementById("totalTarget").value = Math.round(total * 100) / 100;
		//parent.document.getElementById("curTarget").innerText = total;
	}
	
	function initPage(){
		d.style.width = (document.body.scrollWidth - 10) +"px";
	
		getToteTarget('januaryTarget','tote1');
		getToteTarget('februaryTarget','tote2');
		getToteTarget('marchTarget','tote3');
		getToteTarget('aprilTarget','tote4');
		getToteTarget('mayTarget','tote5');
		getToteTarget('juneTarget','tote6');
		getToteTarget('julyTarget','tote7');
		getToteTarget('augustTarget','tote8');
		getToteTarget('septemberTarget','tote9');
		getToteTarget('octoberTarget','tote10');
		getToteTarget('novemberTarget','tote11');
		getToteTarget('decemberTarget','tote12');
	}
-->
</script>
</head>
<body style="margin: 0 0 0 0;" onload="initPage()">
<form name="updateMonthTarget" action="" method="post">
	<div id="d" style="width:800px;height:390px;overflow-x: scroll;overflow-y: scroll;">
	<table cellpadding="0" cellspacing="0" class="table_style" style="width: 1500px;">
		<tr>
			<td class="title2" colspan="13" align="right">
				<fmt:message key='common.lable.unit'/>&nbsp;&nbsp;<fmt:message key='common.lable.yuan'/>&nbsp;&nbsp;
			</td>
		</tr>
		<tr>
			<td class="title"><fmt:message key='target.lable.assignObject'/></td>
			<td class="title"><fmt:message key='common.lable.january'/></td>
			<td class="title"><fmt:message key='common.lable.february'/></td>
			<td class="title"><fmt:message key='common.lable.march'/></td>
			<td class="title"><fmt:message key='common.lable.april'/></td>
			<td class="title"><fmt:message key='common.lable.may'/></td>
			<td class="title"><fmt:message key='common.lable.june'/></td>
			<td class="title"><fmt:message key='common.lable.july'/></td>
			<td class="title"><fmt:message key='common.lable.august'/></td>
			<td class="title"><fmt:message key='common.lable.september'/></td>
			<td class="title"><fmt:message key='common.lable.october'/></td>
			<td class="title"><fmt:message key='common.lable.november'/></td>
			<td class="title"><fmt:message key='common.lable.december'/></td>		
		</tr>
		<c:forEach var="dept" items="${monthTargets}">
		<tr>
			<td class="title4" colspan="13">${dept.deptName}</td>
		</tr>
			<c:forEach var="user" items="${dept.users}">																
			<tr>
				<td>${user.userName}<input id="userId" name="userId" type="hidden" value="${user.id}"/></td>
				<td>
					<fmt:formatNumber var='januaryTarget' value='${user.businessTarget.januaryTarget}' pattern='############'/>
					<input id="januaryTarget" name="januaryTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('januaryTarget','tote1')" 
						value="<c:choose><c:when test='${januaryTarget != null}'>${januaryTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='februaryTarget' value='${user.businessTarget.februaryTarget}' pattern='############'/>
					<input id="februaryTarget" name="februaryTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('februaryTarget','tote2')" 
						value="<c:choose><c:when test='${februaryTarget != null}'>${februaryTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='marchTarget' value='${user.businessTarget.marchTarget}' pattern='############'/>
					<input id="marchTarget" name="marchTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('marchTarget','tote3')" 
						value="<c:choose><c:when test='${marchTarget != null}'>${marchTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='aprilTarget' value='${user.businessTarget.aprilTarget}' pattern='############'/>
					<input id="aprilTarget" name="aprilTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('aprilTarget','tote4')" 
						value="<c:choose><c:when test='${aprilTarget != null}'>${aprilTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='mayTarget' value='${user.businessTarget.mayTarget}' pattern='############'/>
					<input id="mayTarget" name="mayTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('mayTarget','tote5')" 
						value="<c:choose><c:when test='${mayTarget != null}'>${mayTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='juneTarget' value='${user.businessTarget.juneTarget}' pattern='############'/>
					<input id="juneTarget" name="juneTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('juneTarget','tote6')" 
						value="<c:choose><c:when test='${juneTarget != null}'>${juneTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='julyTarget' value='${user.businessTarget.julyTarget}' pattern='############'/>
					<input id="julyTarget" name="julyTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('julyTarget','tote7')" 
						value="<c:choose><c:when test='${julyTarget != null}'>${julyTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='augustTarget' value='${user.businessTarget.augustTarget}' pattern='############'/>
					<input id="augustTarget" name="augustTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('augustTarget','tote8')" 
						value="<c:choose><c:when test='${augustTarget != null}'>${augustTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='septemberTarget' value='${user.businessTarget.septemberTarget}' pattern='############'/>
					<input id="septemberTarget" name="septemberTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('septemberTarget','tote9')" 
						value="<c:choose><c:when test='${septemberTarget != null}'>${septemberTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='octoberTarget' value='${user.businessTarget.octoberTarget}' pattern='############'/>
					<input id="octoberTarget" name="octoberTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('octoberTarget','tote10')" 
						value="<c:choose><c:when test='${octoberTarget != null}'>${octoberTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='novemberTarget' value='${user.businessTarget.novemberTarget}' pattern='############'/>
					<input id="novemberTarget" name="novemberTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('novemberTarget','tote11')" 
						value="<c:choose><c:when test='${novemberTarget != null}'>${novemberTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
				<td>
					<fmt:formatNumber var='decemberTarget' value='${user.businessTarget.decemberTarget}' pattern='############'/>
					<input id="decemberTarget" name="decemberTarget" class="input1" type="text" size="1" onkeyup="onlyNumFloat(this)" 
						onmouseup="this.size='5'" onmouseout="this.size='1'" onblur="getToteTarget('decemberTarget','tote12')" 
						value="<c:choose><c:when test='${decemberTarget != null}'>${decemberTarget}</c:when><c:otherwise>0</c:otherwise></c:choose>"/>
				</td>
			</tr>
			</c:forEach>
		</c:forEach>
		<tr>
			<td class="title"><fmt:message key='common.lable.tote'/></td>
            <td class="title" ><span id="tote1"></span></td>
			<td class="title" ><span id="tote2"></span></td>
			<td class="title" ><span id="tote3"></span></td>
			<td class="title" ><span id="tote4"></span></td>
			<td class="title" ><span id="tote5"></span></td>
			<td class="title" ><span id="tote6"></span></td>
			<td class="title" ><span id="tote7"></span></td>
			<td class="title" ><span id="tote8"></span></td>
			<td class="title" ><span id="tote9"></span></td>
			<td class="title" ><span id="tote10"></span></td>
			<td class="title" ><span id="tote11"></span></td>
			<td class="title" ><span id="tote12"></span></td>
		</tr>	
		<tr>
			<td class="title"><fmt:message key='common.lable.total'/></td>
            <td class="title" colspan="12" style="text-align: center;">
            	<span id="totalTargets"></span>
            	<input id="totalTarget" name="totalTarget" type="hidden" value="0"/>
            </td>
		</tr>
</table>
</div>
</form>
</body>
</html>